<template>
  <div>
    <van-field
      readonly
      clickable
      :name="formItem.name"
      :value="formItem.value"
      :label="formItem.label"
      :placeholder="formItem.placeholder"
      @click="showPicker = true"
    />
    <van-popup v-model="showPicker" position="bottom">
      <van-datetime-picker
        v-model="value"
        :min-date="formItem.minDate"
        :max-date="formItem.maxDate"
        :type="formItem.type"
        @confirm="onConfirm"
        @cancel="showPicker = false"
      />
    </van-popup>
  </div>
</template>
<script>
export default {
  props: {
    formItem: {
      type: Object,
      default: {
        name: "",
        value: "",
        label: "",
        placeholder: "",
        type: "",
        minDate:Date,
        maxDate:Date
      }
    }
  },
  data() {
    return {
      value:"",
      showPicker: false
    };
  },
  methods: {
    onConfirm(value) {
      this.formItem.value = new Date(value).toLocaleString();
      this.showPicker = false;
    }
  }
};
</script>
